<template>
  <form @submit.prevent class="user-edit-email-wrapper" :class="fadeOutCls">
    <h2>更改邮箱</h2>

    <ul class="inputs">
      <li class="clearfix">
        <base-input
          class="old-email-input"
          placeholder="请输入密码"
          @change="inputUserpwd($event.target.value)"
        ></base-input>
      </li>
      <li>
        <base-input
          class="new-email-input"
          placeholder="请输入新邮箱"
          @change="inputEmail($event.target.value)"
        ></base-input>
        <i class="iconfont icon-warning" v-show="ifError[1].sign"></i>
        <p v-show="ifError[1].sign">{{ ifError[1].message }}</p>
      </li>
    </ul>

    <button class="submit" @click="submit">修改</button>

    <i class="iconfont icon-cancel" @click="$emit('exit')"></i>
  </form>
</template>

<script lang="ts" setup>
import BaseInput from '@/components/utils/Input/BaseInput.vue'
import { useUserStore } from '@/store/user';
import { post } from '@/utils/request';
import { ref, reactive, computed } from 'vue'

defineProps<{
  fadeOut: boolean
}>()

let userpwd = ref('')
let email = ref('')
let ifError = reactive([
  {
    sign: false,
    message: '',
  },
  {
    sign: false,
    message: '',
  },
])

function inputUserpwd(password: string) {
      userpwd.value = password
    }

function inputEmail(mail: string) {
      email.value = mail
      if (
        !/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(
          mail
        )
      ) {
        ifError[1].sign = true
        ifError[1].message = '邮箱格式不正确'
      } else {
    post( 'register/check/email', {
      email: mail
    })
    }

  const userStore = useUserStore()

  function submit() {
    userStore.changeAccountInfo({
        key: 'email',
        value: email.value,
        userpwd: userpwd.value,
    })
    }

  let fadeOutCls = computed(() => {
    return ''
  })
</script>

<style lang="scss" scoped>
.user-edit-email-wrapper {
  box-sizing: border-box;
  padding: 2vw 1vw;

  background-color: white;
  border-radius: 1vw;
  transition: 0.3s;

  h2 {
    text-align: center;
    color: var(--blue);
    font-size: 1.8vw;
  }

  .old-email-input,
  .new-email-input {
    --baseInputWidth: 20vw;
    --baseInputHeight: 3vw;
    --baseInputFontsize: 1.2vw;
    margin: 0 auto;
  }

  .inputs li {
    position: relative;
    width: 20vw;
    margin: 2.5vw auto;

    > i {
      color: red;
      position: absolute;
      top: 50%;
      right: 1vw;
      transform: translateY(-50%);
    }

    > p {
      position: absolute;
      top: 100%;
      left: 0.5vw;
      font-size: 0.6vw;
      color: red;
    }
  }

  > .iconfont {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5vw 0.8vw;
    font-size: 1vw;
    font-weight: bold;
    transition: 0.2s;

    &:hover {
      transform: rotate(90deg);
      cursor: pointer;
    }
  }

  > .submit {
    margin: 0 2.5vw;
    width: 20vw;
    height: 3vw;
    color: white;
    font-weight: bold;
    border-radius: 1.5vw;
    background-image: linear-gradient(-200deg, #fac0e7, #91baff);
  }
}
</style>
